import React from 'react';
import './style.css'
// component 
import PictureComponent from '../PictureComponet';
// event
import emitter from '../../util/events';
// antd
import { Card, Form, Row, Col, Select, Button, Icon } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

class AttrPictureForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
        this.selectData = [];
    }

    componentDidMount() {
        emitter.addListener('sendData', (data) => {
            this.setState({
                data
            })
        })
    }
    // select 下拉选择
    AttributeChange = (value, option) => {
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            const element = data[i].label;
            if(element === value) {
                this.selectData = data[i].data;
                break;
            }
        }
    }

    showModal = (e) => {
        let modalData = JSON.parse(e.target.value);
        let type = this.props.form.getFieldValue('Attribute');
        let selectData = this.state.data;
        emitter.emit('showModal', modalData);
        emitter.once('selectPicture', (data) => {
            console.log(modalData)
            selectData = selectData.map((el, index) => {
                if(el.label === type) {
                    el.data.map((ele, indexs) => {
                        if(ele.label === modalData.data.label) {
                            ele.fileList = data
                        }
                        return ele;
                    })
                }
                return el;
            })
            this.setState({
                data: selectData
            })
        })
        
    }
    
    render() {
        const formItemLayout = {
            labelCol: {
                sm: { span: 5 },
            },
            wrapperCol: {
                sm: { span: 18 },
            },
        };

        const { getFieldDecorator } = this.props.form;

        const Options = this.state.data.map((el, index) => {
            return <Option key={index} value={el.label}>{el.label}</Option>;
        })

        console.log(this.selectData)
        const Data = this.selectData.map((d, index) => {
            return <Card key={index} title={'属性值：' + d.label}>
                       <div className="pictrueBtns">
                           <Button 
                                type="primary"
                                value={'{"type": "selectPictrue", "data": ' + JSON.stringify(d) + '}'}
                                onClick={this.showModal}>
                                <Icon type="upload" /> 选择图片
                            </Button>

                            <Button type="danger" onClick={this.handerRemove}>清空图片</Button>
                        </div>
                        <PictureComponent fileList={d.fileList}></PictureComponent>
                    </Card>
        })

        return (
            <div>
                <FormItem label="属性" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {
                                getFieldDecorator('Attribute')(
                                    <Select
                                        placeholder="请选择"
                                        style={{ width: '100%' }}
                                        onSelect={this.AttributeChange}
                                    >
                                    {
                                        Options
                                    }
                                    </Select>
                                )
                            }
                        </Col>
                    </Row>
                </FormItem>
                <div className="valueCards">
                    {
                        Data
                    }
                </div>
            </div>
        )
    }
}

export default Form.create()(AttrPictureForm)